<template>
  <div class="depthDistr">
    <s-title text="事项网办深度分布" :btnshow="false" />
    <div id="depthDistrChart"></div>
  </div>
</template>

<script>
import sTitle from "../../common/sTitle.vue";
import axios from "axios";
export default {
  name: "depthDistr",
  components: {
    sTitle,
  },
  data() {
    return {
      xData: ["一级", "二级", "三级", "四级"],
      lineData: [100, 100, 100, 100],
      yData: [11, 38, 23, 39],
    };
  },
  mounted() {
    axios.get(this.$serverIp + "getElectronicSupervision").then((res) => {
      this.xData = [];
      this.lineData = [];
      this.yData = [];
      for (let i = 0; i < res.data.length; i++) {
              this.xData.push(res.data[i].yps);
      this.lineData.push(res.data[i].rps);
      this.yData.push(res.data[i].px);
       
      }
      this.setEchartHandle();
    });
  },
  methods: {
    setEchartHandle() {
      let _echarts = this.$echarts.init(
        document.getElementById("depthDistrChart"),
        null,
        { devicePixelRatio: 2 }
      );
      let option = {
        baseOption: {
          timeline: {
            show: false,
            top: 0,
            data: [],
          },

          grid: [
            {
              show: false,
              left: "7%",
              top: "5%",
              bottom: "3%",
              containLabel: true,
              width: "89%",
            },
            {
              show: false,
              left: "11%",
              top: "5%",
              bottom: "3%",
              width: "0%",
            },
            {
              show: false,
              left: "8%",
              top: "5%",
              bottom: "3%",
              containLabel: true,
              width: "87%",
            },
          ],
          xAxis: [
            {
              type: "value",
              inverse: true,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              position: "top",
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              position: "top",
              axisLabel: {
                show: false,
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: this.xData,
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: this.xData.map(function (value) {
                return {
                  value: value,
                  textStyle: {
                    align: "center",
                  },
                };
              }),
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
              data: this.xData,
            },
          ],
          series: [],
        },
        options: [],
      };

      option.options.push({
        series: [
          {
            xAxisIndex: 0,
            yAxisIndex: 0,
            name: "外框",
            type: "bar",
            barGap: "-120%", // 设置外框粗细
            data: this.lineData,
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                barBorderColor: "rgba(255,255,255,.2)", // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top", // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
          {
            type: "pictorialBar",
            xAxisIndex: 2,
            yAxisIndex: 2,
            symbol: "rect",
            itemStyle: {
              normal: {
                color: "rgba(73,98,108,0.7)",
              },
            },
            barWidth: 10,
            symbolRepeat: true,
              symbolSize: [5, 9],
            data: this.lineData,
            barGap: "100%",

            label: {
              normal: {
                show: true,
                formatter: (series) => {
                  return (
                    "{normal|" +
                    series.name +
                    "} {value|" +
                    this.yData[series.dataIndex] +
                    "%" +
                    "}"
                  );
                },
                position: "insideTopLeft",
                rich: {
                  normal: {
                    color: "#fff",
                    width: 50,
                    fontSize: 14,
                    fontWeight: "bold",
                  },
                  value: {
                    color: "rgba(0, 216, 255, 1)",
                    fontFamily: "Microsoft YaHei",

                    fontSize: 14,
                    fontWeight: "bold",
                  },
                },
                offset: [10, -30],
              },
            },
            z: -100,
            animationEasing: "elasticOut",
            animationDelay: function (dataIndex, params) {
              return params.index * 30;
            },
          },
          {
            type: "pictorialBar",
            xAxisIndex: 2,
            yAxisIndex: 2,
            symbol: "roundRect",
            barWidth: 8,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: "rgba(0, 216, 255, 1)",
              },
            },
            symbolRepeat: true,
            symbolSize: [5, 9],
            data: this.yData,
            animationEasing: "elasticOut",
            animationDelay: function (dataIndex, params) {
              return params.index * 30 * 1.1;
            },
          },
        ],
      });
      _echarts.setOption(option);
    },
  },
};
</script>
<style scoped>
.depthDistr {
  margin-top: 20px;
}
#depthDistrChart {
  width: 100%;
  height: 27vh;
  margin-top: 10px;
}
</style>
 